<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>缴费类型</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/uploadImg.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body {
            margin: 0;
            padding: 30px;
        }

        #imagePreview {
            width: 160px;
            height: 120px;
            border: 1px #999 solid;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale
            );
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>缴费类型</legend>
</fieldset>

<form id="uploadForm" class="layui-form" action="TheTypePayment" enctype="multipart/form-data" method="post">
    <input type="hidden" name="id" th:value="${session.user.id}">
    <div class="layui-form-item">
        <label class="layui-form-label">自费或凭证件免费</label>
        <div class="layui-input-block">
            <input type="radio" name="TypePayment" value="1" title="自费"
                   th:checked="${session.user.TypePayment=='自费'||session.user.TypePayment!='凭证件免费'}?'checked':'false'">
            <input type="radio" name="TypePayment" value="2" title="凭证件免费"
                   th:checked="${session.user.TypePayment} eq '凭证件免费'?'checked':'false'">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">证件</label>
        <div class="layui-input-block">
            <div id="imagePreview" class="layui-inline" style="vertical-align: top">
                <img id="imgid" th:src="'/images/'+${session.user.pic}" style="width: 100%;height: 100%;"/>
            </div>
            <div class="layui-inline" style="vertical-align: top">
                <input id="imageInput" onchange="loadImageFile();" name="uploadpic" type="file"
                       class="layui-btn layui-btn-danger"/>
                <div id="picid" style="color: red;">请上传证件图</div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存修改</button>
            <button type="reset" lay-filter="resetF" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'util', 'laydate'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date',
            type: 'datetime'
        });

        // 提交事件
        form.on('submit(demo1)', function (data) {
            //因为有图片或者文件，所以要先创建form表单对象，通过form表单对象存储数据发送到后台
            let formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                url: "/updateUserMassage",
                data: formData,
                type: "post",
                contentType: false,
                processData: false,
                success: function (msg) {
                    if (msg == 'SUCCESS') {
                        layer.alert("信息修改成功", {icon: 1});
                    } else {
                        layer.alert("信息修改失败", {icon: 2});
                    }
                }
            });
            return false;  //阻止表单跳转
        });

    });
</script>
</body>
</html>